import "./goods.scss"
import { useEffect, useState } from "react"
import { getGoodsApi } from "@/api/modules/goods"
import { CheckCircleFill } from 'antd-mobile-icons'
import { Stepper } from 'antd-mobile'
import { useSelector, useDispatch } from "react-redux"
import { cartSlice } from "@/store/modules/cartSlice"
// import { useSearchParams } from "react-router-dom"

function Goods() {
    const [goods, setGoods] = useState([])
    // const [searchParams] = useSearchParams()
    // console.log(searchParams.get("name"),searchParams.get("money"),searchParams.get("telephone"));
    const datas = useSelector(state => state.cart.datas)
    const dispatch = useDispatch()

    useEffect(() => {
        getGoodsApi().then(res => {
            if (res.code == 0) {
                setGoods(res.data)
            }
        })
    }, [])

    const renderGood = (goodName) => {
        const good = datas.find(item => item.name == goodName)
        if (good) {
            return (
                <div className="good" key={goodName}>
                    <div className="left">
                        <span onClick={() => dispatch(cartSlice.actions.uncheck({
                            name:goodName
                        }))}>
                            {good.uncheck ? <CheckCircleFill color="#CCCCCC" /> : <CheckCircleFill color="#A15BC7" />}
                        </span>
                        <span className="name">{goodName}</span>
                    </div>
                    <Stepper
                        min={0}
                        defaultValue={good.num}
                        onChange={value => dispatch(cartSlice.actions.changeNum({
                            name: goodName,
                            num: value
                        }))}
                    />
                </div>
            )
        }
        else {
            return (
                <div className="good" key={goodName}>
                    <div className="left">
                        <span onClick={() => dispatch(cartSlice.actions.uncheck({
                            name:goodName
                        }))}>
                            <CheckCircleFill color="#A15BC7" />
                        </span>
                        <span className="name">{goodName}</span>
                    </div>
                    <Stepper
                        min={0}
                        defaultValue={0}
                        onChange={value => dispatch(cartSlice.actions.changeNum({
                            name: goodName,
                            num: value
                        }))}
                    />
                </div>
            )
        }

    }

    return (
        <div className="goods">
            {goods.map(item => (
                renderGood(item.name)
            ))}
        </div>
    )
}

export default Goods